<mat-drawer-container class="w-full h-full" [autosize]="true">
  <mat-drawer #drawer class="w-64" [mode]="isMobile() ? 'over' : 'side'"
    [(opened)]="sideMenuOpened"
    ngmResizer [resizerWidth]="230">
    <div class="p-4">
      <div class="pac-project__router-link p-2 pr-0 flex justify-start items-center group cursor-pointer rounded-md"
        [routerLink]="['/project']"
        routerLinkActive #rla1="routerLinkActive" [routerLinkActiveOptions]="{exact: true}"  
        [class.active]="rla1.isActive"
      >
        <mat-icon fontSet="material-icons-round" class="shrink-0">home</mat-icon>
        <span class="">
          {{ 'PAC.Project.Home' | translate: {Default: 'Home'} }}
        </span>
      </div>

      <div class="p-2 pr-0 flex justify-between items-center">
        <span class="">
          {{ 'PAC.Project.Bookmarks' | translate: {Default: 'Bookmarks'} }}
        </span>
        <button mat-icon-button displayDensity="cosy" (click)="unfoldBookmarks=!unfoldBookmarks">
          <mat-icon *ngIf="!unfoldBookmarks" fontSet="material-icons-outlined">chevron_right</mat-icon>
          <mat-icon *ngIf="unfoldBookmarks" fontSet="material-icons-outlined">expand_more</mat-icon>
        </button>
      </div>
      <mat-list *ngIf="unfoldBookmarks" displayDensity="compact" class="pb-4" cdkDropList>
        <mat-list-item *ngFor="let bookmark of bookmarks" class="pac-project__router-link flex items-center group cursor-pointer rounded-md"
          [routerLink]="['/project', bookmark.story.id]"
          routerLinkActive #rla="routerLinkActive" [routerLinkActiveOptions]="{exact: true}"  
          [class.active]="rla.isActive"
          cdkDrag
          [cdkDragData]="bookmark"
        >
          <div class="w-full flex items-center">
            <mat-icon class="shrink-0 cursor-pointer opacity-0 group-hover:opacity-50">drag_indicator</mat-icon>
            <span class="font-notoColorEmoji">📖</span>
            <span [title]="bookmark.story.name" class="whitespace-nowrap text-ellipsis overflow-hidden ml-2">
              <a >{{bookmark.story.name}}</a>
            </span>

            <span class="flex flex-1"></span>
            <button mat-icon-button displayDensity="cosy" class="opacity-0 group-hover:opacity-50"
              matTooltip="{{ 'PAC.Project.RemoveBookmark' | translate: {Default: 'Remove Bookmark'} }}" matTooltipPosition="right"
              (click)="$event.stopPropagation();removeBookmark(bookmark)"
            >
              <mat-icon fontSet="material-icons-outlined">bookmark</mat-icon>
            </button>
          </div>
        </mat-list-item>
      </mat-list>

      <div class="p-2 pr-0 flex justify-between items-center">
        <span class="">
          {{ 'PAC.Project.Collections' | translate: {Default: 'Collections'} }}
        </span>
        <button  mat-icon-button displayDensity="cosy" [matMenuTriggerFor]="collectionsMenu"
          #mt="matMenuTrigger"
          [class.active]="mt.menuOpen"
        >
          <mat-icon fontSet="material-icons-outlined">more_horiz</mat-icon>
        </button>
      </div>

      <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" class="flex flex-col">
        <!-- This is the tree node template for leaf nodes -->
        <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding cdkTreeNodePaddingIndent="10px"
          class="pac-project__router-link flex items-center group cursor-pointer rounded-md"
          [routerLink]="node.raw.__type__ === 'story' ? ['/project', node.key] : null"
          routerLinkActive #rla="routerLinkActive" [routerLinkActiveOptions]="{exact: false}"
          [class.active]="rla.isActive"
        >
          <!-- use a disabled button to provide padding for tree leaf -->
          <button mat-icon-button disabled displayDensity="cosy" class="ml-2"></button>

          @switch (node.raw.__type__) {
            @case('collection') {
              <mat-icon displayDensity="cosy" class="text-slate-200 group-hover:text-slate-400">folder</mat-icon>
              <span [title]="node.caption" class="whitespace-nowrap text-ellipsis overflow-hidden ml-2">
                {{node.caption}}
              </span>

              <span class="flex flex-1"></span>
              <button class="opacity-0 group-hover:opacity-50"
                mat-icon-button displayDensity="cosy"
                [matMenuTriggerFor]="collectionMenu"
                [matMenuTriggerData]="node"
                #mt="matMenuTrigger"
                [class.active]="mt.menuOpen"
                (click)="$event.stopPropagation()"
              >
                <mat-icon fontSet="material-icons-outlined">more_horiz</mat-icon>
              </button>
            }
            @case('story') {
              <span class="font-notoColorEmoji">📖</span>
              <span [title]="node.caption" class="whitespace-nowrap text-ellipsis overflow-hidden ml-2">
                <a >{{node.caption}}</a>
              </span>

              <span class="flex flex-1"></span>
              <button class="opacity-0 group-hover:opacity-50"
                mat-icon-button displayDensity="cosy"
                [matMenuTriggerFor]="storyMenu"
                [matMenuTriggerData]="node"
                #mt="matMenuTrigger"
                [class.active]="mt.menuOpen"
                (click)="$event.stopPropagation()"
                >
                <mat-icon fontSet="material-icons-outlined">more_horiz</mat-icon>
              </button>
            }
          }
        </cdk-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding cdkTreeNodePaddingIndent="20px"
          class="flex items-center group cursor-pointer rounded-md">
          <button mat-icon-button cdkTreeNodeToggle displayDensity="cosy" class="ml-2"
                  [attr.aria-label]="'Toggle ' + node.caption"
                  (click)="node.isExpanded = !node.isExpanded"
                  [style.visibility]="node.expandable ? 'visible' : 'hidden'">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          <mat-icon *ngIf="node.raw.__type__ === 'collection'" displayDensity="cosy" class="text-slate-200 group-hover:text-slate-400">folder</mat-icon>
          <span [title]="node.caption" class="whitespace-nowrap text-ellipsis overflow-hidden ml-2">
            {{node.caption}}
          </span>
          <span class="flex flex-1"></span>
          <button *ngIf="node.raw.__type__ === 'collection'" class="opacity-0 group-hover:opacity-50"
            mat-icon-button displayDensity="cosy"
            [matMenuTriggerFor]="collectionMenu"
            [matMenuTriggerData]="node"
            #mt="matMenuTrigger"
            [class.active]="mt.menuOpen"
          >
            <mat-icon fontSet="material-icons-outlined">more_horiz</mat-icon>
          </button>
        </cdk-tree-node>
      </cdk-tree>

      <div class="p-2 pr-0 flex justify-between items-center">
        <span class="">
          {{ 'PAC.Project.SemanticModels' | translate: {Default: 'Semantic Models'} }}
        </span>

        <span class="flex flex-1"></span>
        <button *ngIf="isOwner" mat-icon-button displayDensity="cosy"
          matTooltip="{{ 'PAC.Project.AddModel' | translate: {Default: 'Add Model'} }}"
          matTooltipPosition="above"
          (click)="addModel()">
          <mat-icon>add_link</mat-icon>
        </button>

        <button mat-icon-button displayDensity="cosy" (click)="modelsExpand=!modelsExpand">
          <mat-icon *ngIf="!modelsExpand" fontSet="material-icons-outlined">chevron_right</mat-icon>
          <mat-icon *ngIf="modelsExpand" fontSet="material-icons-outlined">expand_more</mat-icon>
        </button>
      </div>

      <mat-list *ngIf="modelsExpand" displayDensity="compact" class="pb-4"
        cdkDropList (cdkDropListDropped)="onDropModels($event)">
        <mat-list-item *ngFor="let model of project?.models"
          class="pac-project__router-link flex items-center group cursor-pointer rounded-md"
          [routerLink]="['/models', model.id]"
          cdkDrag
          [cdkDragData]="model"
          >
          <div class="w-full flex items-center">
            <mat-icon class="shrink-0 cursor-pointer opacity-0 group-hover:opacity-50">drag_indicator</mat-icon>
            <span class="whitespace-nowrap text-ellipsis overflow-hidden">
              {{ model.name }}
            </span>
  
            <span class="flex flex-1"></span>
            <button mat-icon-button ngmAppearance="danger" displayDensity="cosy" class="opacity-0 group-hover:opacity-80 "
              matTooltip="{{ 'PAC.Project.RemoveModel' | translate: {Default: 'Remove Model'} }}" matTooltipPosition="right"
              (click)="$event.stopPropagation();removeModel(model)"
            >
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </mat-list-item>
      </mat-list>

      <div class="pac-project__router-link p-2 pr-0 flex justify-start items-center group cursor-pointer rounded-md"
        [routerLink]="['indicators']"
        routerLinkActive #rla4="routerLinkActive" [routerLinkActiveOptions]="{exact: true}"
        [class.active]="rla4.isActive"
      >
        <mat-icon fontSet="material-icons-outlined" class="shrink-0">trending_up</mat-icon>
        <span class="ml-2">
          {{ 'PAC.Project.Indicators' | translate: {Default: 'Indicators'} }}
        </span>
      </div>

      @if (!isDefaultProject()) {
        <div class="pac-project__router-link p-2 pr-0 flex justify-start items-center group cursor-pointer rounded-md"
          [routerLink]="['members']"
          routerLinkActive #rla5="routerLinkActive" [routerLinkActiveOptions]="{exact: true}"
          [class.active]="rla5.isActive"
        >
          <mat-icon fontSet="material-icons-outlined" class="shrink-0">people</mat-icon>
          <span class="ml-2">{{ 'PAC.Project.Members' | translate: {Default: 'Members'} }}</span>
        </div>

        <div class="pac-project__router-link p-2 pr-0 flex justify-start items-center group cursor-pointer rounded-md"
          [routerLink]="['files']"
          routerLinkActive #rla6="routerLinkActive" [routerLinkActiveOptions]="{exact: true}"
          [class.active]="rla6.isActive"
        >
          <mat-icon fontSet="material-icons-outlined" class="shrink-0">attach_file</mat-icon>
          <span class="ml-2">{{ 'PAC.Project.Files' | translate: {Default: 'Files'} }}</span>
        </div>
      }
    </div>

    <div ngmResizerBar resizerBarPosition="right"
        cdkDrag
        cdkDragLockAxis="x"
    ></div>
  </mat-drawer>
  <mat-drawer-content [ngStyle]="{'z-index': isMobile() ? 0 : 10}" [@routeAnimations]="o.isActivated && o.activatedRouteData?.title">
    <router-outlet #o="outlet"></router-outlet>

    <ngm-drawer-trigger class="absolute -left-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened" 
      [matTooltip]="'PAC.Project.ProjectNavigations' | translate: {Default: 'Project Navigations'}"
      matTooltipPosition="after" />
  </mat-drawer-content>
</mat-drawer-container>

<mat-menu #collectionsMenu="matMenu" class="ngm-density__compact">
  <ng-template matMenuContent>
    <button mat-menu-item (click)="newCollection()">
      <mat-icon fontSet="material-icons-outlined">create_new_folder</mat-icon>
      {{ 'PAC.Project.NewCollection' | translate: {Default: 'New Collection'} }}
    </button>
    <button mat-menu-item (click)="newStory()">
      <mat-icon fontSet="material-icons-outlined">collections</mat-icon>
      {{ 'PAC.Project.NewStory' | translate: {Default: 'New Story'} }}
    </button>
  </ng-template>
</mat-menu>

<mat-menu #collectionMenu="matMenu" class="ngm-density__compact">
  <ng-template matMenuContent let-key="key" let-raw="raw">
    <button mat-menu-item *ngIf="raw?.id !== DefaultCollection.id" (click)="newCollection(key)">
      <mat-icon fontSet="material-icons-outlined">create_new_folder</mat-icon>
      {{ 'PAC.Project.NewCollection' | translate: {Default: 'New Collection'} }}
    </button>
    <button mat-menu-item (click)="newStory(key)">
      <mat-icon fontSet="material-icons-outlined">collections</mat-icon>
      {{ 'PAC.Project.NewStory' | translate: {Default: 'New Story'} }}
    </button>

    <button mat-menu-item *ngIf="raw?.id !== DefaultCollection.id" ngmAppearance="danger" (click)="deleteCollection(key)">
      <mat-icon fontSet="material-icons-outlined">folder_delete</mat-icon>
      {{ 'PAC.Project.RemoveCollection' | translate: {Default: 'Remove Collection'} }}
    </button>
  </ng-template>
</mat-menu>

<mat-menu #storyMenu="matMenu" class="ngm-density__compact">
  <ng-template matMenuContent let-story="raw">
    @switch (story.status) {
      @case(StoryStatusEnum.RELEASED) {
        <button mat-menu-item
          (click)="releaseStory(story)">
          <mat-icon>rocket_launch</mat-icon>
          {{ 'PAC.Project.Rerelease' | translate: {Default: 'Rerelease'} }}
        </button>

        <button mat-menu-item
          (click)="archiveStory(story)">
          <mat-icon>archive</mat-icon>
          {{ 'PAC.Project.Archive' | translate: {Default: 'Archive'} }}
        </button>
      }
      @default {
        <button mat-menu-item (click)="releaseStory(story)">
          <mat-icon>rocket_launch</mat-icon>
          {{ 'PAC.Project.Release' | translate: {Default: 'Release'} }}
        </button>
      }
    }

    <button mat-menu-item (click)="editStory(story)">
      <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
      {{ 'PAC.KEY_WORDS.Edit' | translate: {Default: 'Edit'} }}
    </button>

    <button mat-menu-item (click)="copy(story)">
      <mat-icon fontSet="material-icons-outlined">copy</mat-icon>
      {{ 'PAC.Project.Copy' | translate: {Default: 'Copy'} }}
    </button>
    <button mat-menu-item (click)="moveStory(story)">
      <mat-icon fontSet="material-icons-outlined">drive_file_move</mat-icon>
      {{ 'PAC.Project.MoveTo' | translate: {Default: 'Move to'} }}
    </button>

    <button mat-menu-item ngmAppearance="danger" (click)="deleteStory(story)">
      <mat-icon>delete</mat-icon>
      {{ 'PAC.Project.Remove' | translate: {Default: 'Remove'} }}
    </button>
  </ng-template>
</mat-menu>

<mat-menu #modelsMenu="matMenu" class="ngm-density__compact">
  <ng-template matMenuContent let-story="raw">
    <button mat-menu-item (click)="addModel()">
      <mat-icon>add_link</mat-icon>
      {{ 'PAC.Project.AddModel' | translate: {Default: 'Add Model'} }}
    </button>
  </ng-template>
</mat-menu>


<ng-template #collectionCreation>
<div class="flex flex-col">
  <header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <h4 style="pointer-events: none;" class="mb-0">
      {{ 'PAC.ACTIONS.CREATE' | translate: { Default: 'Create' } }}
      {{ 'PAC.Project.Collection' | translate: { Default: 'Collection' } }}
    </h4>
  </header>

  <div mat-dialog-content class="mat-dialog-content mat-typography w-96">
    <form class="flex flex-col justify-start items-stretch" [formGroup]="form"
      (ngSubmit)="createCollection()">
      <mat-form-field appearance="fill" floatLabel="always" displayDensity="cosy">
        <mat-label>{{ 'PAC.Project.CollectionName' | translate: { Default: 'Name' } }}</mat-label>
        <input matInput formControlName="name" required
          placeholder="{{ 'PAC.Project.WhatIsTheCollectionName' | translate: { Default: 'What is the name of your collection' } }}?"
        />
      </mat-form-field>

      <ngm-tree-select appearance="fill" floatLabel="always" formControlName="parentId"
        label="{{ 'PAC.Project.ParentCollection' | translate: { Default: 'Parent Collection' } }}"
        displayBehaviour="descriptionOnly"
        [treeNodes]="collections()"
      ></ngm-tree-select>

      <button [disabled]="form.invalid"></button>
    </form>
  </div>

  <mat-dialog-actions align="end">
    <div ngmButtonGroup>
      <button mat-button mat-dialog-close>
        {{ 'PAC.ACTIONS.CANCEL' | translate: { Default: 'Cancel' } }}
      </button>

      <button
        mat-raised-button
        color="accent"
        [disabled]="form.invalid"
        (click)="createCollection()"
      >
        {{ 'PAC.ACTIONS.CREATE' | translate: { Default: 'Create' } }}
      </button>
    </div>
  </mat-dialog-actions>
</div>
</ng-template>


<ng-template #moveTo>
  <div class="flex flex-col">
    <header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
      <h4 style="pointer-events: none;" class="mb-0">
        {{ 'PAC.Project.MoveToCollection' | translate: { Default: 'Move to collection' } }}
      </h4>
    </header>

    <div mat-dialog-content class="mat-dialog-content mat-typography w-96">
      <ngm-tree-select appearance="fill" floatLabel="always"
          [treeNodes]="collections()"
          [label]="'PAC.Project.Collection' | translate: {Default: 'Collection'}"
          searchable
          placeholder="{{ 'PAC.Project.CollectionPlaceholder' | translate: {Default: 'Which collection should this go in'} }}?"
          [displayBehaviour]="DisplayBehaviour.descriptionOnly"
          [(ngModel)]="moveToCollectionId"
        >
        </ngm-tree-select>
    </div>

    <mat-dialog-actions align="end">
      <div ngmButtonGroup>
        <button mat-button mat-dialog-close>
          {{ 'PAC.ACTIONS.CANCEL' | translate: { Default: 'Cancel' } }}
        </button>

        <button
          mat-raised-button
          color="accent"
          [matDialogClose]="moveToCollectionId"
        >
          {{ 'PAC.ACTIONS.CREATE' | translate: { Default: 'Create' } }}
        </button>
      </div>
    </mat-dialog-actions>
  </div>
</ng-template>